import { useNavigate, useSearchParams } from "react-router-dom";
import styles from "./index.module.css";
import { ActionSheet, Avatar, Button, Form, Input, NavBar, Toast } from "antd-mobile";
import { useEffect, useRef, useState } from "react";
import request from "../../../axios";
const SalesEdit = () => {
  const navigate = useNavigate();
  const [searParams] = useSearchParams();
  const [form]: any = Form.useForm();

  const type: string = searParams.get("type") || "";
  const handler = useRef<any>(null);
  const [status, setStatus] = useState<string>("open");
  const actions: any[] = [
    {
      text: "启用",
      key: "open",
      onClick: () => {
        setStatus("open");
        handler.current?.close();
      },
    },
    {
      text: "停用",
      key: "close",
      onClick: () => {
        setStatus("close");
        handler.current?.close();
      },
    },
  ];

  const handleSubmit = async (val: any) => {
    const id: any = searParams.get('type') === 'edit' ? JSON.parse(searParams.get('info') || '{}')?.id : null
    const url: string = searParams.get('type') === 'edit' ? '/user/update' : '/user/create'
    try {
      await request.post(url, {
        ...val,
        id,
        status: status === "open" ? 1 : 0,
      });
      Toast.show('提交成功')
    } catch (error) {}
    finally {
        navigate(-1)
    }
  };

  const setVal = () => {
    const info: any = JSON.parse(searParams.get('info') || '{}')
    form.setFieldsValue({
        ...info
    })
    setStatus(info.status ? 'open' : '')
  }

  useEffect(() => {
    setVal()
  }, [])

  return (
    <div className={styles.content}>
      <NavBar
        onBack={() => {
          navigate(-1);
        }}
        style={{ padding: "8px 20px" }}
      >
        {type === "add" ? "添加成员" : "编辑成员"}
      </NavBar>
      <Form
        layout="horizontal"
        mode="card"
        form={form}
        onFinish={(val) => {
          handleSubmit(val);
        }}
        footer={
          <div
            style={{
              width: "100%",
              display: "flex",
              justifyContent: "space-around",
              alignItems: "center",
              height: "60px",
            }}
          >
            <Button
              block
              type="submit"
              color="primary"
              size="large"
              className={styles.subbtn}
            >
              确认{type === "add" ? "新增" : "编辑"}
            </Button>
          </div>
        }
      >
        <Form.Item name="code" label="成员编码" className={styles.input_title}>
          <Input onChange={console.log} placeholder="请输入成员编码" disabled />
        </Form.Item>
        <Form.Item name="name" label="成员头像" className={styles.input_title}>
          <Avatar src="" style={{ "--size": "48px", borderRadius: "50%" }} />
        </Form.Item>
        <Form.Item name="name" label="成员名称" className={styles.input_title}>
          <Input onChange={console.log} placeholder="请输入成员名称" />
        </Form.Item>
        <Form.Item name="phone" label="成员账号" className={styles.input_title}>
          <Input onChange={console.log} placeholder="请输入成员账号" />
        </Form.Item>
        <Form.Item
          name="birthday"
          label="成员状态"
          trigger="onConfirm"
          className={styles.input_title}
          onClick={() => {
            handler.current = ActionSheet.show({
              actions: actions,
              cancelText: "取消",
              onClose: () => {
                // Toast.show("动作面板关闭");
              },
            });
          }}
        >
          {status === "open" ? "启用" : "停用"}
        </Form.Item>
      </Form>
    </div>
  );
};

export default SalesEdit;
